<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>TabView Example - Dynamically Loading Content</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/button/assets/button.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="../../../yui-cms/build/dispatcher/dispatcher.js"></script>
<style type="text/css">
#demo {
    width:40em; /* arbitrary width */
}

#demo .yui-content {
    padding:1em;
}

#demo .loading {
    background-image:url(img/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

#demo .loading * {
    display:none;
}

</style>
<script type="text/javascript">
	
YAHOO.example.init = function() {
    var tabView = new YAHOO.widget.TabView({id: 'demo'});
    
	YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
	    label: 'Simple TabView',
        dataSrc: 'tabs/xhtml.with.tabview.html',
        cacheData: true,
        active: true
	  }), 
	  tabView, 
	  { before: function() { 
	      // before the loading...
	    }, 
	    after: function() { 
	      // after the execution...
	      var mySimpleTab = new YAHOO.widget.TabView('childtabview');
	    }         
	  }
	);

    YAHOO.util.Dispatcher.delegate (new YAHOO.widget.Tab({
    	label: 'Autonomous Tabview',
        dataSrc: 'tabs/xhtml.with.autonomous.tabview.html',
        cacheData: true
    }), tabView);

    YAHOO.util.Event.onContentReady('doc', function() {
        tabView.appendTo('doc');
    });

};

YAHOO.example.init();
</script>

</head>
<body id="cms-body">
<div id="doc">

	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>

    <h1>TabView and Dispatcher Example - Dynamically loading content with child tabview inside</h1>
    <p>This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to managing the "child tabview" inside each tab.</p>
</div>



</body>
</html>
